<template>
  <div  class="avue-crud avue-crud--card">
    <div class="el-card is-never-shadow avue-crud__search">
      <div class="el-card__body" v-if="flag == false">
        <div class="avue-form" style="width: 100%;">
          <el-form>
            <div class="el-row" span="24">
              <div class="avue-group avue-group--header" index="0" active="1">
                <div class="avue-form__group avue-form__group--flex">
                  <el-form-item label="热搜标题" >
                    <el-input v-model="a" placeholder="请输入热搜标题"></el-input>
                  </el-form-item>
                  <el-form-item label="热搜内容">
                    <el-input v-model="b"  placeholder="请输入热搜内容"></el-input>
                  </el-form-item>
                  <el-form-item label="状态:" >
                    <el-select v-model="c" placeholder="请选择状态">
                      <el-option label="启用" value="1"></el-option>
                      <el-option label="未启用" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                  <div class="el-form-item__content" style="margin-left: 0px;text-align: center;">
                    <el-button @click="bt1" type="primary" style="padding: 7px 15px;font-size: 12px;" icon="el-icon-search">搜索</el-button>
                    <el-button @click="bt2"  style="padding: 7px 15px;font-size: 12px;" icon="el-icon-delete">清空</el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <div class="el-card is-never-shadow">
      <div class="avue-crud__menu">
        <div class="avue-crud__left">
          <el-button @click="fcjkad1" type="primary" icon="el-icon-plus" style="font-size: 12px;padding: 9px 15px;">新增</el-button>
          <el-button v-show="length == 0" disabled type="primary" style="background-color:#FAB6B6;border-color:none;padding: 9px 15px;font-size: 12px">批量删除</el-button>
          <el-button v-show="length !=0" @click="fcjkad2" type="danger" style="border-color:none;padding: 9px 15px;font-size: 12px">批量删除</el-button>
        </div>
        <div class="avue-crud__right">
          <el-button @click="jdk1" style="padding: 9px;" icon="el-icon-refresh" circle></el-button>
          <el-button @click="jdk2" style="padding: 9px;" icon="el-icon-search" circle></el-button>
        </div> 
      </div>
      <span class="avue-crud__tip el-tag el-tag--light">
        <span class="avue-crud__tip-name">当前表格已选择<span class="avue-crud__tip-count">{{length}}</span>项</span>
        <el-button @click="hecba" class="el-button--text" style="padding: 9px 15px;font-size: 12px;">清空</el-button>
      </span>
      <!-- 表格 -->
      <el-form>
        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" header-align="center"></el-table-column>
          <el-table-column label="热搜标题" header-align="center" prop="title"></el-table-column>
          <el-table-column prop="content" label="热搜内容" header-align="center"></el-table-column>
          <el-table-column prop="recDate" label="录入时间" header-align="center"></el-table-column>
          <el-table-column prop="seq" label="顺序" width="200" header-align="center"></el-table-column>
          <el-table-column style="text-align:center" prop="status" label="状态" width="160" header-align="center">
            <template slot-scope="scope">
              <el-button type="primary" style="font-size: 12px; padding: 9px 15px;" plain v-if="scope.row.status == 1">启用</el-button>
              <el-button type="danger" style="font-size: 12px; padding: 9px 15px;" plain v-else>未启用</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" show-overflow-tooltip header-align="center">
            <template slot-scope="scope">
              <el-button @click="one(scope.row)" type="primary" icon="el-icon-edit" style="font-size: 12px; padding: 9px 15px;">修改</el-button>
              <el-button  @click="two(scope.row)" type="danger" icon="el-icon-delete" style="font-size: 12px; padding: 9px 15px;">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <!-- 分页器 -->
        <div class="avue-crud__pagination">
          <el-pagination background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40,50,100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <!-- 模态框1 -->
        <el-dialog title="新增" :visible.sync="dialogVisible" width="45%" :before-close="handleClose" class="ioo">
          <el-form :rules="rules">
            <el-form-item label="标题" prop="text1">
              <el-input v-model="text1" maxlength="50" type="text" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="text2">
              <el-input v-model="text2" maxlength="255" type="textarea" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="排序号" >
              <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="0" :max="10"></el-input-number>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="radio"  v-removeAriaHidden>
                    <el-radio  :label="0">下线</el-radio>
                    <el-radio  :label="1">正常</el-radio>
                </el-radio-group>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="ieurqo">取 消</el-button>
            <el-button type="primary" @click="ieurqo2">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 模态框2 -->
        <el-dialog title="修改" :visible.sync="dialogVisible2" width="45%" :before-close="handleClose2" class="ioo">
          <el-form :rules="rules">
            <el-form-item label="标题" prop="text11">
              <el-input v-model="text11" maxlength="50" type="text" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="text22">
              <el-input v-model="text22" maxlength="255" type="textarea" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="排序号" >
              <el-input-number v-model="num2" controls-position="right" @change="handleChange2" :min="0" :max="10"></el-input-number>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="radio2"  v-removeAriaHidden>
                    <el-radio  :label="0">下线</el-radio>
                    <el-radio  :label="1">正常</el-radio>
                </el-radio-group>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="ieurqoa">取 消</el-button>
            <el-button type="primary" @click="ieurqo2a">确 定</el-button>
          </span>
        </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableData:[],
      // 输入框值
      a:"",
      b:"",
      c:"",
      // 时间戳
      timestamp:Math.floor(Date.now() / 1000),
      // 分页器
      currentPage4:1,
      total:0,
      shu:1,
      ye:10,
      // 隐藏
      flag : false,
      // 已选数组
      multip:[],
      length:0,
      // 模态框1
      dialogVisible: false,
      // 模态框2
      dialogVisible2: false,
      // 单选
      radio: 0,
      // 单选
      radio2: 0,
      // 验证
      rules:{
        text1:[
        { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        text2:[
        { required: true, message: '内容不能为空', trigger: 'blur' }
        ],
        text11:[
        { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        text22:[
        { required: true, message: '内容不能为空', trigger: 'blur' }
        ],
      },
      // 标题
      text1:"",
      // 内容
      text2:"",
      // 排序号
      num:0,
      // 标题
      text11:"",
      // 内容
      text22:"",
      // 排序号
      num2:0,
      // 时间
      recDate:"",
      // id
      hotSearchId:"",
      shopId:""
    }
  },
  created(){
    // 时间戳
    this.formattedDate()
    // 表格数据
    this.getList()
  },
  methods:{
    getList(){
      this.$http.get("http://admin.yami.byesame.com/apis/admin/hotSearch/page",{params:{
        t:this.timestamp,
        current:1,
        size:10
      }}).then((res)=>{
        this.tableData = res.data.records
        this.total = res.data.records.length
      })
    },
    // 时间戳
    formattedDate() {
      this.timestamp = Math.floor(Date.now() / 1000);
    },
    // 分页器 每页条数
    handleSizeChange(val){
      this.$http.get("http://admin.yami.byesame.com/apis/admin/hotSearch/page",{params:{
        t:this.timestamp,
        current:this.shu,
        size:val
      }}).then((res)=>{
        this.tableData = res.data.records
      })
    },
    // 分页器 当前页
    handleCurrentChange(val){
      this.shu = val-1
      this.$http.get("http://admin.yami.byesame.com/apis/admin/hotSearch/page",{params:{
        t:this.timestamp,
        current:this.shu,
        size:this.ye
      }}).then((res)=>{
        this.tableData = res.data.records
      })
    },
    // 搜索按钮
    bt1(){
      this.$http.get("http://admin.yami.byesame.com/apis/admin/indexImg/page",{params:{
        
      }})
    },
    // 清空按钮
    bt2(){

    },
    handleSelectionChange(val) {
      this.multip = val;
      console.log(this.multip);
      this.length = val.length
      console.log("长度",this.length);
    },
    // 修改
    one(e){
      console.log(e);
      this.dialogVisible2 = true
      this.text11 = e.title,
      this.text22 = e.content,
      this.num2 = e.seq,
      this.radio2 = e.status
      this.hotSearchId = e.hotSearchId
      this.recDate = e.recDate
      this.shopId = e.shopId
    },
    // 删除
    two(val){
      console.log(val);
      let a = []
      a.push(val.hotSearchId)
      this.$confirm('确定进行[删除]操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.$http.delete("http://admin.yami.byesame.com/apis/admin/hotSearch",{data:a}).then((res)=>{
            this.getList()
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 刷新
    jdk1(){
      this.getList()
    },
    // 隐藏
    jdk2(){
      if(this.flag == false){
        this.flag = true
      }else{
        this.flag = false
      }
    },
    // 表格清空
    hecba(){
      if(this.multip.length!=0){
        this.multip = []
        this.getList()
      }
    },
    // 模态框1
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 模态框1
    handleClose2(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 新增
    fcjkad1(){
      this.dialogVisible = true
    }, 
    // 批量删除
    fcjkad2(){
      let gie = []
      for(let i = 0;i<this.multip.length;i++){
        gie.push(this.multip[i].hotSearchId)
      }
      this.$confirm('确定进行[删除]操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete("http://admin.yami.byesame.com/apis/admin/hotSearch",{
          data:gie
        }).then((res)=>{
          console.log(res);
          this.getList()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    // 步进器
    handleChange(value) {
      this.num = value
    },
    // 步进器
    handleChange2(value) {
      this.num2 = value
    },
    // 模态框1取消
    ieurqo(){
      this.dialogVisible = false
    },
    // 模态框2取消
    ieurqoa(){
      this.dialogVisible2 = false
    },
    // 模态框1确定
    ieurqo2(){
      this.$http.post("http://admin.yami.byesame.com/apis/admin/hotSearch",{
        t:this.timestamp,
        title:this.text1,
        content:this.text2,
        recDate:"",
        hotSearchId:0,
        seq:this.num,
        status:this.radio
      }).then((res)=>{
        console.log(res);
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.getList()
      })
    },
    // 模态框2确定
    ieurqo2a(){
      console.log(this.template);
      this.$http.put("http://admin.yami.byesame.com/apis/admin/hotSearch",{
        t:this.timestamp,
        title:this.text11,
        content:this.text22,
        recDate:this.recDate,
        hotSearchId:this.hotSearchId,
        seq:this.num2,
        status:this.radio2,
        shopId:this.shopId
      }).then((res)=>{
        console.log(res);
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.dialogVisible2 = false
        this.getList()
      })
    }
  }
}
</script>

<style scoped>
.avue-crud {
  margin: 0 auto;
  width: 100%;
}
.el-card {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  transition: .3s;
}
.el-card, .el-message {
  border-radius: 4px;
  overflow: hidden;
}
.el-card__body {
  padding: 20px;
}
.avue-form {
  margin: 0 auto;
  box-sizing: border-box;
}
.el-row {
  box-sizing: border-box;
}
.avue-group {
  width: 100%;
}
.avue-form__group--flex {
  display: flex;
}
.avue-form__group {
  align-items: flex-start;
  flex-wrap: wrap;
  height: auto;
}
>>>.el-form-item__content{
  margin-left: 80px!important;
}
>>>.el-form-item__label,.el-form-item__label{
  width: 80px!important;
}
.el-form-item{
  margin-left: 10px!important;;
}
.el-card{
  border: initial
}
.el-card__body{
  padding: 0;
}
.el-tag {
  background-color: rgba(2, 161, 233, .1);
  padding: 0 10px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  color: #02a1e9;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(2, 161, 233, .2);
  white-space: nowrap;
}
.el-tag{
  display: inline-block;
}
>>>.ioo .el-input__inner{
  height: 42px !important;
  font-size: 12px !important;
}
</style>